import React, { useCallback } from 'react';
import {
	Box,
	Stack,
	FormControl,
	InputGroup,
	InputLeftElement,
	Input,
	Icon,
	Button,
	Text,
	HStack,
	// useColorModeValue,
} from '@chakra-ui/react';
import { FiUser, FiLock, FiPhone } from 'react-icons/fi';
import { AiOutlineWechat, AiOutlineQq } from 'react-icons/ai';
import axios from '../../../service/index.js';

export default function SignUp() {

	const onSubmitToEnd = useCallback(() => {
		console.log('onSubmitToEnd');
		axios.post('users', {
			"user":{   
				"username": "Jacob",
				"email": "jake@jake.jake",
				"password": "jakejake"
			}
		}).then(res => {
			console.log(res);
		}).catch(console.error);
	}, []);

	return (
		<Stack spacing="6">
			<Box bg="rgba(181, 181, 181, 0.1)" borderRadius="4px" border="1px solid #c8c8c8">
				<FormControl>
					<InputGroup>
						<InputLeftElement
							h="50px"
							pointerEvents="none"
							children={<Icon as={FiUser}></Icon>}
						/>
						<Input h="50px" placeholder="你的昵称" maxLength="16" variant="flushed"></Input>
					</InputGroup>
				</FormControl>
				<FormControl>
					<InputGroup>
						<InputLeftElement
							h="50px"
							pointerEvents="none"
							children={<Icon as={FiPhone}></Icon>}
						/>
						<Input h="50px" placeholder="手机号" maxLength="11" variant="flushed"></Input>
					</InputGroup>
				</FormControl>
				<FormControl>
					<InputGroup>
						<InputLeftElement
							h="50px"
							pointerEvents="none"
							children={<Icon as={FiLock}></Icon>}
						/>
						<Input h="50px" placeholder="设置密码" maxLength="16" variant="flushed"></Input>
					</InputGroup>
				</FormControl>
			</Box>
			<Button onClick={onSubmitToEnd} h="45px" bg="customize.register" borderRadius="full" color="White" _focus={{boxShadow: "none"}}>注册</Button>
			<Text my="10px" fontSize="12px" lineHeight="20px" color="#969696" textAlign="center">
				点击 “注册” 即表示您同意并愿意遵守简书<br/>
				<Text target="_blank" href="https://www.jianshu.com/p/c44d171298ce" as="a" cursor="pointer" color="#3194d0">用户协议</Text>
				&nbsp;和&nbsp;
				<Text target="_blank" href="https://www.jianshu.com/p/2ov8x3" as="a" cursor="pointer" color="#3194d0">隐私政策</Text> 。
			</Text>
			<Stack mt="40px">
				<HStack className="more-sign" justifyContent="center">
					<Text as="h6" fontSize="12px" color="#b5b5b5" mb="10px">社交帐号直接注册</Text>
				</HStack>
				<HStack justifyContent="center">
					<Icon cursor="pointer" fontSize="28px" color="#00bb29" as={AiOutlineWechat}></Icon>
					<Icon cursor="pointer" fontSize="28px" color="#498ad5" as={AiOutlineQq}></Icon>
				</HStack>
			</Stack>
		</Stack>
	)
}
